<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Spring Boot+WebSocket+广播式</title>

</head>
<body onload="disconnect()">
<noscript><h2 style="color: #ff0000">貌似你的浏览器不支持websocket</h2></noscript>
<div>
    <div>
        员工id唯一标识
       <input type="hidden" value="<shiro:principal property="id"/>" id="uid">
        <button id="connect" onclick="connect();">连接</button>
        <button onclick="getOnlineEmp('information')">获取在线员工</button>
        <button id="disconnect" disabled="disabled" onclick="disconnect();">断开连接</button>
    </div>
    <div id="conversationDiv">
        <label>输入你的名字</label><input type="text" id="name"/>
        <button id="sendName" onclick="sendEmp();">发送</button>
        <p id="response"></p>
        <p id="response1"></p>
    </div>
</div>
<audio id="myaudio">
    <source src="/resources/audio/notify.mp3" type="audio/mpeg">
    <source src="/resources/audio/notify.ogg" type="audio/ogg">
    <source src="/resources/audio/notify.wav" type="audio/wav">
</audio>
<!--<script th:src="@{sockjs.min.js}"></script>
<script th:src="@{stomp.min.js}"></script>
<script th:src="@{jquery.js}"></script>-->
<%--<script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>--%>
<script src="/resources/js/sockjs.min.js"></script>
<script src="/resources/js/stomp.js_2.3.3_stomp.js"></script>
<%--<script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>--%>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script th:inline="javascript">
    var stompClient = null;
    //此值有服务端传递给前端,实现方式没有要求
   // var userId = [[${userId}]];
    var userId = $("#uid").val();


    function setConnected(connected) {
        document.getElementById('connect').disabled = connected;
        document.getElementById('disconnect').disabled = !connected;
        document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
        $('#response').html();
    }

    function connect() {
        var socket = new SockJS('/endpointWisely'); //1连接SockJS的endpoint是“endpointWisely”，与后台代码中注册的endpoint要一样。
        stompClient = Stomp.over(socket);//2创建STOMP协议的webSocket客户端。
        stompClient.connect({}, function (frame) {//3连接webSocket的服务端。
            setConnected(true);
            // console.log('开始进行连接Connected: ' + frame);
            //4通过stompClient.subscribe（）订阅服务器的目标是'/topic/getResponse'发送过来的地址，与@SendTo中的地址对应。
            // stompClient.subscribe('/topic/getResponse', function (respnose) {
            //     console.log("---------- stompClient.subscribe-----------------")
            //     console.log(respnose);
            //     showResponse(JSON.parse(respnose.body));
            // });
            //4通过stompClient.subscribe（）订阅服务器的目标是'/user/' + userId + '/msg'接收一对一的推送消息,其中userId由服务端传递过来,用于表示唯一的用户,通过此值将消息精确推送给一个用户
            stompClient.subscribe('/user/' + userId + '/msg', function (respnose) {
                console.log("----------解析来自员工的信息----connect---------");
                console.log(respnose);
                showResponse1(JSON.parse(respnose.body));
            });
        });
    }


    function disconnect() {
        if (stompClient != null) {
            stompClient.disconnect();
        }
        setConnected(false);
        console.log("Disconnected");
    }

    function sendEmp() {
    //    var name = $('#name').val();
        var msg = '<a href="/index">这个是新消息！</a>';
        //通过stompClient.send（）向地址为"/welcome"的服务器地址发起请求，与@MessageMapping里的地址对应。因为我们配置了registry.setApplicationDestinationPrefixes(Constant.WEBSOCKETPATHPERFIX);所以需要增加前缀/ws-push/
        stompClient.send("/ws-push/emp", {}, JSON.stringify({'from': userId,'to':"1",'content': msg}));
    }


    function sendName() {
        var name = $('#name').val();
        //通过stompClient.send（）向地址为"/welcome"的服务器地址发起请求，与@MessageMapping里的地址对应。因为我们配置了registry.setApplicationDestinationPrefixes(Constant.WEBSOCKETPATHPERFIX);所以需要增加前缀/ws-push/
        stompClient.send("/ws-push/welcome", {}, JSON.stringify({'from': name}));
    }

    function showResponse(message) {
        console.log("------------showResponse----------------");
        console.log(message);
        var response = $("#response");
        response.html(message.content);
    }

    function showResponse1(message) {
        console.log("------------showResponse1----------------");
        console.log(typeof message);
        console.log(message);
        // var res = JSON.parse(message);
        var response = $("#response1");
        var player = $("#myaudio")[0];
        player.play();
        response.html(message.content);
    }

   function getOnlineEmp(typeName){
       var formData = new FormData();
       formData.append("type",typeName);
       $.ajax({
           url: '/getallemp',
           type: "POST",
           data:formData,
           cache: false,
           async: false,
           processData: false,
           contentType: false
       }).done(function (res) {
           console.log(res);
       });
   }

    $(function () {
        getOnlineEmp();
    });
</script>
</body>
</html>